// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus');
//     var ul = focus.children[0];
//     var w = focus.offsetWidth;
//     var ol = focus.children[1];
//     var index = 0;
//     var timer = setInterval(function () {
//         index++;
//         var translatex = -index * w;
//         ul.style.transition = 'all .3s';
//         ul.style.transform = 'translateX(' + translatex + 'px)';
//     }, 2000)
//     ul.addEventListener('transitionend', function () {
//         if (index >= 3) {
//             index = 0;
//             ul.style.transition = 'none';
//             var translatex = -index * w;
//             ul.style.transform = 'translateX(' + translatex + 'px)';
//         } else if (index < 0) {
//             index = 2;
//             ul.style.transition = 'none';
//             var translatex = -index * w;
//             ul.style.transform = 'translateX(' + translatex + 'px)';
//         }
//         ol.querySelector('.current').classList.remove('current');
//         ol.children[index].classList.add('current');
//     })
//     var startX = 0;
//     var moveX = 0;
//     var flag = false;
//     ul.addEventListener('touchstart', function (e) {
//         startX = e.targetTouches[0].pageX;
//         clearInterval(timer);
//     })
//     ul.addEventListener('touchmove', function (e) {
//         moveX = e.targetTouches[0].pageX - startX;
//         var translatex = -index * w + moveX;
//         ul.style.transition = 'none';
//         ul.style.transform = 'translateX(' + translatex + 'px)';
//         flag = true;
//         e.preventDefault();
//     });
//     ul.addEventListener('touchend', function (e) {
//         if (flag) {
//             if (Math.abs(moveX) > 50) {
//                 // console.log(moveX);
//                 if (moveX > 0) {//大于0以后肯定不是初始图片位置了 所以肯定是递减
//                     // 往右滑是正值 表明去往上一张图片
//                     index--;//错误一搞错递减
//                 } else {
//                     // 往左滑是负值 表明去往下一张图片
//                     index++;
//                 }
//                 //  结束触摸时需要过渡
//                 var translatex = -index * w;
//                 ul.style.transition = 'all .3s';//错误三忘写all
//                 ul.style.transform = 'translateX(' + translatex + 'px)';

//             } else {
//                 // 回弹过渡要快速
//                 var translatex = -index * w;
//                 ul.style.transition = 'all .1s';
//                 ul.style.transform = 'translateX(' + translatex + 'px)';
//             }
//         }

//         clearInterval(timer);
//         timer = setInterval(function () {
//             index++
//             var translatex = -index * w;
//             ul.style.transition = 'all .3s';
//             ul.style.transform = 'translateX(' + translatex + 'px)';
//         }, 2000);//错误二点忘记毫秒数
//     });

// })



// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus')
//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('ol')
//     var index = 0
//     var w = focus.offsetWidth

//     var timer = setInterval(function () {
//         index++
//         var translatex = -index * w
//         ul.style.transition = 'all .3s'
//         ul.style.transform = 'translateX(' + translatex + 'px)'
//     }, 2000)

//     ul.addEventListener('transitionend', function () {
//         if (index >= 3) {
//             index = 0
//             var translatex = -index * w
//             ul.style.transition = 'none'//无缝联播不需要过渡
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         }
//         else if (index < 0) {
//             index = 2
//             var translatex = -index * w
//             ul.style.transition = 'none'//无缝联播不需要过渡
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         }
//         ol.querySelector('.current').classList.remove('current')
//         ol.children[index].classList.add('current')
//     })

//     var startX = 0
//     var moveX = 0
//     var flag = false
//     ul.addEventListener('touchstart', function (e) {
//         clearInterval(timer)//首次触摸时要结束定时器比较好
//         startX = e.targetTouches[0].pageX
//     })
//     ul.addEventListener('touchmove', function (e) {

//         moveX = e.targetTouches[0].pageX - startX
//         var translatex = -index * w + moveX
//         ul.style.transition = 'all .3s '//手动移动后需要过渡
//         ul.style.transform = 'translateX(' + translatex + 'px)'
//         e.preventDefault()
//         flag = true
//     })
//     ul.addEventListener('touchend', function () {
//         if (flag) {//只有move事件触发才进行计算
//             if (Math.abs(moveX) > 50) {
//                 if (moveX > 0) {
//                     index--
//                 } else {
//                     index++
//                 }
//                 var translatex = -index * w
//                 ul.style.transition = 'all .3s '//手动移动后需要过渡
//                 ul.style.transform = 'translateX(' + translatex + 'px)'
//             } else {
//                 var translatex = -index * w
//                 ul.style.transition = 'all .1s '//突出回弹效果 所以速度需要快一点 手动移动后需要过渡
//                 ul.style.transform = 'translateX(' + translatex + 'px)'
//             }
//         }
//     })
//     clearInterval(timer)
//     timer = setInterval(function () {
//         index++
//         var translatex = -index * w
//         ul.style.transition = 'all .3s'
//         ul.style.transform = 'translateX(' + translatex + 'px)'
//     }, 2000)

// })
// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus')
//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('ol')
//     var w = focus.offsetWidth
//     var index = 0
//     var timer = setInterval(function () {
//         index++
//         var translatex = -index * w
//         ul.style.transition = 'all .3s'
//         ul.style.transform = 'translateX(' + translatex + 'px)'
//     }, 2000)
//     // 无缝滚动
//     ul.addEventListener('transitionend', function () {
//         if (index >= 3) {
//             index = 0
//             var translatex = -index * w
//             ul.style.transition = 'none'
//             ul.style.transform = 'translateX(' + translatex + 'px)'

//         } else if (index < 0) {
//             index = 2
//             var translatex = -index * w
//             ul.style.transition = 'none'
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         }
//         ol.querySelector('.current').classList.remove('current')
//         ol.children[index].classList.add('current')
//     })
//     // 移动触摸事件
//     var startX = 0
//     var moveX = 0
//     var flag = false
//     ul.addEventListener('touchstart', function (e) {
//         clearInterval(timer)
//         startX = e.targetTouches[0].pageX

//     })
//     ul.addEventListener('touchmove', function (e) {
//         moveX = e.targetTouches[0].pageX - startX //移动后的距离
//         var translatex = -index * w + moveX //当前位置+ 移动后的距离 = 被拖到的图片位置
//         ul.style.transition = 'all .3s'
//         ul.style.transform = 'translateX(' + translatex + 'px)'
//         e.preventDefault()
//         flag = true


//     })

//     ul.addEventListener('touchend',function () {
//         // console.log('11');
//         if (flag) {
//             if (Math.abs(moveX) > 50) {
//                 if (moveX > 0) {
//                     index--
//                 } else {
//                     index++
//                 }
//                 var translatex = -index * w
//                 ul.style.transition = ' all .3s'
//                 ul.style.transform = 'translateX(' + translatex + 'px)'
//             } else {
//                 var translatex = -index * w
//                 ul.style.transition = ' all .1s'
//                 ul.style.transform = 'translateX(' + translatex + 'px)'
//             }
//         }
//         // 手指事件结束后 在开启自动轮播
//         clearInterval(timer) //如果定时器看起来被加速了 说明定时器冲突了 先清除上一次定时器即可
//         timer = setInterval(function () {
//             index++
//             var translatex = -index * w
//             ul.style.transition = 'all .3s'
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         }, 2000)

//     })



// })



window.addEventListener('load', function () {
    var focus = document.querySelector('.focus')
    var ul = focus.querySelector('ul')
    var ol = focus.querySelector('ol')
    var w = focus.offsetWidth
    var index = 0
    var timer = setInterval(function () {
        index++
        var translatex = -index * w
        ul.style.transition = 'all .3s'
        ul.style.transform = 'translateX(' + translatex + 'px)'

    }, 2000)
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0
            var translatex = -index * w
            ul.style.transition = 'none'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
        else if (index < 0) {
            index = 2
            var translatex = -index * w
            ul.style.transition = 'none'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
        ol.querySelector('.current').classList.remove('current')
        ol.children[index].classList.add('current')


    })
    var startX = 0
    var moveX = 0
    var flag = false
    ul.addEventListener('touchstart', function (e) {
        clearInterval(timer)
        startX = e.targetTouches[0].pageX


    })
    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - startX
        var translatex = -index * w + moveX
        ul.style.transition = 'none'//手指移动不需要过渡
        ul.style.transform = 'translateX(' + translatex + 'px)'
        flag = true
    })
    ul.addEventListener('touchend', function () {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--
                } else {
                    index++
                }
                var translatex = -index * w
                ul.style.transition = 'all .3s'
                ul.style.transform = 'translateX(' + translatex + 'px)'
            } else {
                var translatex = -index * w
                ul.style.transition = 'all .1s'
                ul.style.transform = 'translateX(' + translatex + 'px)'
            }
        }
        clearInterval(timer)
        timer = setInterval(function () {
            index++
            var translatex = -index * w
            ul.style.transition = 'all .3s'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }, 2000)//忘记添加毫秒数
    })

})